
<template>
 <div class="container">
    <div class="input-wrapper">
      <span class="input-label">根据发布者id爬取所有笔记</span>
      <el-input v-model="posterIdInput" placeholder="请输入发布者id" @keyup.enter="handlePosterIdClick"/>
      <el-button type="primary" @click="handlePosterIdClick" :loading="posterIdLoading" >抓取数据</el-button>
    </div>
    <xhs-table-vue :table-data="posterIdTableData" :loading="posterIdLoading" ></xhs-table-vue>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import xhsTableVue from '@/components/Table/XhsTableVue.vue'
import { ElMessage } from "element-plus";
import {  getNoteByPosterId } from '@/api/xhs.js'

const posterIdLoading = ref(false)
const posterIdInput = ref('')
const posterIdTableData = ref([])

const handlePosterIdClick = async () => {
  try {
    // 请求的时候如果表格中有数据，那么就清空原来的数据
    if(posterIdTableData.value.length > 0){
      posterIdTableData.value = []

    }
    const input = posterIdInput.value.trim()
    if(input === ''){
        ElMessage({
          message: '输入字段不能为空!',
          type: 'warning',
        })
    }else {
      posterIdLoading.value = true
      const result = await getNoteByPosterId(input)
      const data = result['data']
      // console.log(data)
      posterIdTableData.value = data
    }
  } catch (error) {
    console.log(error)
    ElMessage.error(error.response.data)
  } finally {
    posterIdLoading.value = false
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}
.input-wrapper {
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}
.input-label {
  width: fit-content;
  padding: 5px;
  font-size: 16px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
</style>